<script setup lang="ts">
import { useDesign } from '@fl/hooks/web/useDesign'
import { useI18n } from '@fl/hooks/web/useI18n'
import { useUserStore } from '@fl/store/modules/user'
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'

import projPackage from '../../../../package.json'

const props = defineProps<{
    height?: number
}>()
const { fullPath } = useRoute()
const { push } = useRouter()
const userStore = useUserStore()
const show = ref(false)
const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const { t } = useI18n()
const { height } = toRefs(props)

function loginOut() {
    userStore.logoutConfirm()
}
function toPersonal() {
    push('/personal')
    show.value = false
}
watchEffect(() => {
    if (fullPath) {
        show.value = false
    }
})
</script>

<template>
    <ElDropdown v-if="userStore.getUserInfo?.sysUser?.roles?.[0]?.roleKey === 'operationer'"
                class="custom-hover"
                :class="prefixCls"
                trigger="click"
    >
        <div class="flex h-full items-center">
            <span class="<lg:hidden pl-[5px] text-14px text-[var(--top-header-text-color)]">
                {{ userStore.getUserInfo?.sysUser?.userName }}
            </span>
        </div>

        <template #dropdown>
            <ElDropdownMenu>
                <!-- <ElDropdownItem>
                    <div @click="toPage('/personal/personal-center')">
                        个人中心
                    </div>
                </ElDropdownItem> -->

                <ElDropdownItem class="size-full"
                                @click="loginOut"
                >
                    <div>{{ t('common.loginOut') }}</div>
                </ElDropdownItem>

                <ElDropdownItem divided>
                    <div>版本 {{ projPackage.version }}</div>
                </ElDropdownItem>
            </ElDropdownMenu>
        </template>
    </ElDropdown>

    <div v-else>
        <div class="user-info custom-hover"
             @click="show = !show"
        >
            {{ userStore.getUserInfo?.sysUser?.userName }}
        </div>

        <div v-if="show"
             class="user-box"
             :style="{ top: `${height}px` }"
        >
            <div class="mb-20 flex justify-between items-center">
                <div class="text-20 font-bold">
                    {{ userStore.getUserInfo?.sysUser?.userName }}
                </div>

                <div class="text-16 cursor-pointer hover:text-red-500"
                     @click="loginOut"
                >
                    退出
                    <div class="i-material-symbols:logout" />
                </div>
            </div>

            <div v-if="userStore.getUserInfo?.enterpriseName"
                 class="enterprise-box mb-20 font-500"
            >
                {{ userStore.getUserInfo?.enterpriseName }}
            </div>

            <div class="text-16 flex">
                <router-link class="flex-1 cursor-pointer hover:text-blue"
                             to="/"
                             @click="show = false"
                >
                    <div class="i-material-symbols:home-outline-rounded h-1em w-1em" />
                    商城首页
                </router-link>

                <div class="flex-1 cursor-pointer hover:text-blue"
                     @click="toPersonal"
                >
                    <div class="i-material-symbols:verified-user-outline h-1em w-1em" />
                    账号设置
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.user-info {
    position: relative;
}

.user-box {
    position: fixed;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 452px;
    right: 0;
}

.enterprise-box {
    background-color: #f0f3f7;
    padding: 8px 16px;
    border-radius: 4px;
    color: #6186bc;
}

.fade-bottom-enter-active,
.fade-bottom-leave-active {
    transition:
        opacity 0.25s,
        transform 0.3s;
}

.fade-bottom-enter-from {
    opacity: 0;
    transform: translateY(-10%);
}

.fade-bottom-leave-to {
    opacity: 0;
    transform: translateY(10%);
}
</style>
